<!-- doc type 文档头信息 文档类型 html -->
<!DOCTYPE html>
<!-- 文档根标签 根节点 根元素 -->
<html lang="en">
<!-- 文档的头部信息 配置信息 给浏览器看的 -->

<head>
  <!-- meta单标签 代表元信息 -->
  <!-- 设置文档的文字编码格式 -->
  <meta charset="UTF-8">
  <!-- 编码修改位置 -->
  <!-- 1. <meta charset="UTF-8"> -->
  <!-- 2. 编辑器的编码 -->
  <!-- 3. 浏览器的编码 -->
  <!-- 定宽同设备宽度，不可进行缩放-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 特殊：用户能看到 -->
  <title>Hello</title>
</head>
<!-- 文档的主体部分 显示在浏览器视口区 给用户看的-->

<body>
  <div>块元素</div>
  <div>
    <p title="这是一个段落">段落1</p>
  </div>
  <p style="color: red;">段落2</p>

  <p>文档元素</p>
  <!-- 单标签 -->
  <img src="../4-IMG/title.png" alt="">
  <img src="../4-IMG/title.png" alt="" />
  <img src="../4-IMG/title1.png" alt="图片去外太空了" />
  <a href="https:baidu.com">baidu一下</a>
  <div>
    <div>直接写5个空 格</div>
    <!-- 空格实体 -->
    <div>空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
    <!-- < > 符号 -->
    <div><a>直接使用</div>
    <div>&lt;a&gt;实体使用</div>
    &lt;div&gt;
    <!-- ‘ “符号 -->
    <div>&quot;123&quot; &apos;123&apos;</div>
    <!-- & 符号 -->
    <div>&amp;</div>
    <!-- 显示屏上显示出&amp; -->
    <div>&amp;amp;</div>
    <h3>块元素</h3>
    <h2>块元素</h2>
    <h6>块元素</h6>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <h3>行内元素 - 与其他行内元素共享一行空间 或者外层是块元素包裹的</h3>
    <span>span标签1</span>
    <span>span标签2</span>
    <span>span标签3</span>
    <div><span>span标签4</span><span>span标签4</span><span>span标签4</span></div>
    <div><span>span标签5</span></div>
    <div><span>span标签6</span></div>
    <strong>加粗</strong>
    <b>加粗</b>
    <i>倾斜</i>
    <em>em</em>
  </div>
</body>


</html>